<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=no,minimal-ui">
  <title>菩提阁</title>
  <link rel="icon" href="./../images/favico.ico">
  <!--不同屏幕尺寸根字体设置-->
  <script src="./../js/base.js"></script>
  <!--element-ui的样式-->
  <link rel="stylesheet" href="../../backend/plugins/element-ui/index.css"/>
  <!--引入vant样式-->
  <link rel="stylesheet" href="../styles/vant.min.css"/>
  <!-- 引入样式  -->
  <link rel="stylesheet" href="../styles/index.css"/>
  <!--本页面内容的样式-->
  <link rel="stylesheet" href="./../styles/add-order.css"/>
</head>
<body>
<div id="add_order" class="app">
  <div class="divHead">
    <div class="divTitle">
      <i class="el-icon-arrow-left" @click="goBack"></i>菩提阁
    </div>
  </div>
  <div class="divContent">
    <div class="divAddress">
      <div @click="toAddressPage">
        <div class="address">{{ address.detail }}</div>
        <div class="name">
          <span>{{ address.consignee }}{{ address.sex === '1' ? '先生' : '女士' }}</span>
          <span>{{ address.phone }}</span>
        </div>
        <i class="el-icon-arrow-right"></i>
      </div>
      <div class="divSplit"></div>
      <div class="divFinishTime">预计{{ finishTime }}送达</div>
    </div>
    <div class="order">
      <div class="title">订单明细</div>
      <div class="divSplit"></div>
      <div class="itemList">
        <div class="item" v-for="(item,index) in cartData" :key="index">
          <el-image :src="imgPathConvert(item.image)">
            <div slot="error" class="image-slot">
              <img src="./../images/noImg.png"/>
            </div>
          </el-image>
          <div class="desc">
            <div class="name">{{ item.name }}</div>
            <div class="numPrice">
              <span class="num">x{{ item.number }}</span>
              <div class="price">
                <span class="spanMoney">￥</span>{{ item.amount }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="note">
      <div class="title">备注</div>
      <van-field
          v-model="note"
          rows="2"
          autosize
          type="textarea"
          maxlength="50"
          placeholder="请输入您需要备注的信息"
          show-word-limit
      />
    </div>
  </div>
  <div class="divCart">
    <div :class="{imgCartActive: cartData && cartData.length > 0, imgCart:!cartData || cartData.length<1}"></div>
    <div :class="{divGoodsNum:1===1, moreGoods:cartData && cartData.length > 99}"
         v-if="cartData && cartData.length > 0">{{ goodsNum }}
    </div>
    <div class="divNum">
      <span>￥</span>
      <span>{{ goodsPrice }}</span>
    </div>
    <div class="divPrice"></div>
    <div :class="{btnSubmitActive: cartData && cartData.length > 0, btnSubmit:!cartData || cartData.length<1}"
         @click="goToPaySuccess()">去支付
    </div>
  </div>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="../../backend/plugins/vue/vue.js"></script>
<!-- 引入组件库 -->
<script src="../../backend/plugins/element-ui/index.js"></script>
<!-- 引入vant样式 -->
<script src="./../js/vant.min.js"></script>
<script src="./../api/address.js"></script>
<!-- 引入axios -->
<script src="../../backend/plugins/axios/axios.min.js"></script>
<script src="./../js/request.js"></script>
<script src="./../js/common.js"></script>
<script src="./../api/main.js"></script>
<script src="./../api/order.js"></script>
<script>
  new Vue({
    el: "#add_order",
    data() {
      return {
        address: {
          phone: '',//手机号
          consignee: '',//姓名
          detail: '',//详细地址
          sex: '1',
          id: undefined
        },
        finishTime: '',//送达时间
        cartData: [],
        note: ''//备注信息
      }
    },
    computed: {
      goodsNum() {
        let num = 0
        this.cartData.forEach(item => {
          num += item.number
        })
        if (num < 99) {
          return num
        } else {
          return '99+'
        }
      },
      goodsPrice() {
        let price = 0
        this.cartData.forEach(item => {
          price += (item.number * item.amount)
        })
        return price
      }
    },
    created() {
      this.initData()
    },
    mounted() {
    },
    methods: {
      goBack() {
        history.go(-1)
      },
      initData() {
        //获取默认的地址
        this.defaultAddress()
        //获取购物车的商品
        this.getCartData()
      },
      //获取默认地址
      async defaultAddress() {
        const res = await getDefaultAddressApi()
        if (res.code === 1) {
          this.address = res.data
          this.getFinishTime()
        } else {
          if (res.msg != "用户未登录") {
            window.requestAnimationFrame(() => {
              window.location.href = '/front/page/address-edit.html'
            })
          }
          this.$message.error("用户未登录，请重新登陆")
        }
      },
      //获取送达时间
      getFinishTime() {
        let now = new Date()
        let hour = now.getHours() + 1
        let minute = now.getMinutes()
        if (hour.toString().length < 2) {
          hour = '0' + hour
        }
        if (minute.toString().length < 2) {
          minute = '0' + minute
        }
        this.finishTime = hour + ':' + minute
      },
      toAddressPage() {
        window.requestAnimationFrame(() => {
          window.location.href = '/front/page/address.html'
        })
      },
      //获取购物车数据
      async getCartData() {
        const res = await cartListApi({})
        if (res.code === 1) {
          this.cartData = res.data
        } else {
          this.$notify({type: 'warning', message: res.msg});
        }
      },
      async goToPaySuccess() {
        const params = {
          remark: this.note,
          payMethod: 1,
          addressBookId: this.address.id
        }
        const res = await addOrderApi(params)
        if (res.code === 1) {
          window.requestAnimationFrame(() => {
            window.location.replace('/front/page/pay-success.html')
          })
        } else {
          this.$notify({type: 'warning', message: res.msg});
        }
      },
      //网络图片路径转换
      imgPathConvert(path) {
        return imgPath(path)
      }
    }
  })
</script>
</body>
</html>